<template>
  <div class="homes">
    <van-nav-bar title="微平台" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <div class="contents">
        <h3 class="tit">工单处理</h3>
        <h4 class="smTit">
            工单信息
        </h4>
        <div class="infoItem">
            <label for="">工单名称：</label>
            <div class="infoCon">{{ baseInfo.title }}</div>
        </div>
        <div class="infoItem">
            <label for="">归属部门：</label>
            <div class="infoCon">{{ baseInfo.creatorDept }}</div>
        </div>
        <div class="infoItem">
            <label for="">厅店名称：</label>
            <div class="infoCon">{{ baseInfo.hallName }}</div>
        </div>
        <div class="infoItem">
            <label for="">申请地市：</label>
            <div class="infoCon">{{ baseInfo.cyti }}</div>
        </div>
        <div class="infoItem">
            <label for="">工单细类：</label>
            <!--<div class="infoCon">{{ baseInfo.id }}</div>-->
            <div class="infoCon" v-if="baseInfo.identyDetail ==='02020401'">热线听音</div>
            <div class="infoCon" v-else>营业厅听音</div>
        </div>
        <div class="infoItem">
            <label for="">站店听音时间：</label>
            <div class="infoCon">{{ baseInfo.executeTime }}</div>
        </div>
      <!--  <div class="infoItem">
            <label for="">工单类型：</label>
            <div class="infoCon" v-if="baseInfo.projectType ==='00'">预警单</div>
            <div class="infoCon" v-else-if="baseInfo.projectType ==='01'">督办单</div>
            <div class="infoCon" v-else-if="baseInfo.projectType ==='02'">任务单</div>
            <div class="infoCon" v-else-if="baseInfo.projectType ==='03'">申请单</div>
            <div class="infoCon" v-else></div>
        </div>-->
       <!-- <div class="infoItem">
            <label for="">工单子类型：</label>
            <div class="infoCon" v-if="baseInfo.subProjectType ==='0001'">重点政策投诉预测预警单</div>
            <div class="infoCon" v-else-if="baseInfo.subProjectType ==='0002'">重点产品投诉预测预警单</div>
            <div class="infoCon" v-else-if="baseInfo.subProjectType ==='0003'">投诉热点预测预警单</div>
            <div class="infoCon" v-else-if="baseInfo.subProjectType ==='0004'">潜在不满客户预测预警单</div>
            <div class="infoCon" v-else-if="baseInfo.subProjectType ==='0005'">不知情定制预警单</div>
            <div class="infoCon" v-else-if="baseInfo.subProjectType ==='0006'">产品洞察预警单</div>
            <div class="infoCon" v-else-if="baseInfo.subProjectType ==='0007'">触点感知洞察预警单</div>
            <div class="infoCon" v-else-if="baseInfo.subProjectType ==='0101'">重点政策投诉预警督办单</div>
            <div class="infoCon" v-else-if="baseInfo.subProjectType ==='0201'">不知情定制任务单</div>
            <div class="infoCon" v-else-if="baseInfo.subProjectType ==='0202'">潜在不满客户预测任务</div>
            <div class="infoCon" v-else-if="baseInfo.subProjectType ==='0301'">省专公司申请单</div>
            <div class="infoCon" v-else-if="baseInfo.subProjectType ==='0008'">服务质量标准预警单</div>
            <div class="infoCon" v-else-if="baseInfo.subProjectType ==='0200'">通用版任务单</div>
            <div class="infoCon" v-else></div>
        </div>-->
         <div class="infoItem">
            <label for="">活动参与人数：</label>
            <div class="infoCon">{{ baseInfo.hdCount }}</div>
        </div> 
         <div class="infoItem">
            <label for="">处室以上人员参与人数：</label>
            <div class="infoCon">{{ baseInfo.csycCount }}</div>
        </div>  
         <div class="infoItem">
            <label for="">其中主要领导参加：</label>
            <div class="infoCon">{{ baseInfo.zyldCount }}</div>
        </div>
        <div class="infoItem">
            <label for="">其中公司领导参与人数：</label>
            <div class="infoCon">{{ baseInfo.qzgsldCount }}</div>
        </div>
        <div class="infoItem">
            <label for="">站店听音主题：</label>
            <div class="infoCon">{{ baseInfo.theme }}</div>
        </div>
        <div class="infoItem">
            <label for="">站店听音简介：</label>
            <div class="infoCon">{{ baseInfo.proFile }}</div>
        </div>
        <div class="infoItem">
            <label for="">工单内容：</label>
            <div class="infoCon">{{ baseInfo.content }}</div>
        </div>
        <div class="infoItem">
            <label for="">责任人：</label>
            <div class="infoCon">{{ baseInfo.responsiblePeople }}</div>
        </div>
        <div class="infoItem">
            <label for="">厅店地址：</label>
            <div class="infoCon">{{ baseInfo.hallStoreAddress }}</div>
        </div>
        <div class="infoItem">
            <label for="">联系人：</label>
            <div class="infoCon">{{ baseInfo.hallStoreUserName }}</div>
        </div>
        <div class="infoItem">
            <label for="">联系方式：</label>
            <div class="infoCon">{{ baseInfo.hallStoreUserPhone }}</div>
        </div>
        <div class="infoItem">
            <label for="">是否省内问题：</label>
            <!--<div class="infoCon">{{ baseInfo.id }}</div>-->
            <div class="infoCon" v-if="baseInfo.isSn ==='0'">是</div>
            <div class="infoCon" v-else>否</div>
        </div>
        <!--<h4 class="smTit">
            大音平台下发附件：
        </h4>
        <div class="fileList">
            <span
             v-for="(item,index) in fileList"   
            >{{item.fileName}}</span>
        </div>-->
      <!--  <h4 class="smTit">
            处理结果附件：
        </h4>
        <div class="fileList">
            <span
                    v-for="(item,index) in fileList2"
            >{{item.fileName}}</span>
        </div>-->
        <h4 class="smTit">
            审核意见
        </h4> 
        <textarea class="approveInfo" v-model="approveFont"></textarea>
        <button class="approve" @click="approve">处理</button>
         <h4 class="smTit">
            流程信息
        </h4>
        <div class="flowList" v-if="flowList.length">
            <div class="flowItem" :key="index" v-for="(item,index) in flowList">
                 <div class="infoItem">
                    <label for="">节点名称：</label>
                    <div class="infoCon">{{ item.ACT_NAME_ }}</div>
                </div> 
                <div class="infoItem">
                    <label for="">办理人：</label>
                    <div class="infoCon">{{ item.ASSIGNEE_ }}</div>
                </div>
                <div class="infoItem">
                    <label for="">开始时间：</label>
                    <div class="infoCon">{{ item.START_TIME_ }}</div>
                </div>
                <div class="infoItem">
                    <label for="">结束时间：</label>
                    <div class="infoCon">{{ item.END_TIME_ }}</div>
                </div>
                <div class="infoItem">
                    <label for="">处理耗时：</label>
                    <div class="infoCon">{{ item.DURATION_ }}</div>
                </div>
                <div class="infoItem">
                    <label for="">办理操作：</label>
                    <div class="infoCon" v-if="item.APPROVAL ==='0'">驳回</div>
                    <div class="infoCon" v-else-if="item.APPROVAL ==='1'">同意</div>
                    <div class="infoCon" v-else><span style="color:cornflowerblue">正在办理....</span></div>
                </div>
                <div class="infoItem">
                    <label for="">办理意见：</label>
                    <div class="infoCon">{{ item.REASON }}</div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import "@/api/index"
import {ref, reactive, toRefs, onMounted} from "vue"
import {useRouter, useRoute} from "vue-router"
import GetNetUtil from "../../../utils/GetNetUtil";

export default {
  setup() {
    let state = reactive({
      listData: [],
      approveFont:"",
      projectNo:"",
      fiId:"",
      baseInfo:{},
      fileList:[],
      fileList2:[],
      //flowList:[{name:"工单名称：工单名称：工单名称：工单名称：工单名称：",id:"321"},{name:"341",id:"341"},{name:"1321",id:"1321"}]
      flowList:[]
    })
    //上个页面传递的id
      state.projectNo = useRoute().params.type;
    //查询工单详情
    getOrderDetail();
    //查询上传附件信息
   // getFileName();

    const router = useRouter();
    async function getOrderDetail(){
          GetNetUtil.requestPost("/workBench/getZdtyOaTaskName", "",{projectNo:state.projectNo}, getOrderDetail)
          async function getOrderDetail(resp) {
              if (resp.resultCode === "200") {
                  state.baseInfo=resp.data;
                  state.fiId=state.baseInfo.fiId;
                /*  if (null != state.baseInfo.fileUrl && state.baseInfo.fileUrl != '') {
                      var files =state.baseInfo.fileUrl.split("|");
                      for(var i=0;i<files.length;i++){
                          let table = {};
                          table.fileName=files[i];
                          table.url="";
                          state.fileList.push(table);
                      }
                  }*/
                  //查询处理信息
                  getProc();
              }else {
                  console.log("查询详细内容出错",resp);
              }
          }
      }

    /*async function getFileName(){
          GetNetUtil.requestPost("/workBench/getUploadFileInfoPoList", "",{projectNo:state.projectNo}, getFileName)
          async function getFileName(resp) {
              if (resp.resultCode === "200") {
                  if (resp.data.length>0) {
                      for(var i=0;i<resp.data.length;i++){
                          let table = {};
                          table.fileName=resp.data[i].file_name;
                          table.url="";
                          state.fileList2.push(table);
                      }
                  }
              }else {
                  console.log("查询附件信息出错",resp);
              }
          }
      }*/
    async function getProc(){
          GetNetUtil.requestPost("/workBench/proc", "",{fiId:state.fiId}, getProc)
          async function getProc(resp) {
              if (resp.resultCode === "200") {
                  console.log(resp.data);
                  if (resp.data.length>0) {
                      for(var i=0;i<resp.data.length;i++){
                          let table = {};
                          table.ACT_NAME_=resp.data[i].ACT_NAME_;
                          table.ASSIGNEE_=resp.data[i].ASSIGNEE_;
                          table.START_TIME_=resp.data[i].START_TIME_;
                          table.END_TIME_=resp.data[i].END_TIME_;
                          table.DURATION_=resp.data[i].DURATION_;
                          table.APPROVAL=resp.data[i].APPROVAL;
                          table.REASON=resp.data[i].REASON;
                          state.flowList.push(table);
                      }
                  }
              }else {
                  console.log("查询流程信息出错",resp);
              }
          }
      }

 /*   function approve(){
        approve();
    }*/
      //审核
      async function approve(){
          state.baseInfo.reason=state.approveFont;
          state.baseInfo.approval='1';
          GetNetUtil.requestPost("/workBench/zdtyApprovalTask", "",state.baseInfo, approve)
          async function approve(resp) {
              if (resp.resultCode === "200") {
                  console.log(resp);
                  alert("处理成功!");
                  router.push({name: "micro-orderPage"});
              }else {
                  console.log("审批出错",resp);
              }
          }
      }
    const onClickLeft = () =>  router.push({name: "micro-platform"});


    onMounted(()=>{

    })
    return {
      ...toRefs(state),
      onClickLeft,
      approve,
    }
  }

  ,
}
</script>

<style lang="scss" scoped>
.homes {
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;

  .nav-right {
    font-size: 8px;
    color: #ffffff;
  }
    .approveInfo{
        width: 100%;
        resize: none;
        border: 1px solid #ddd;
        height: 150px;
        margin-bottom: 20px;
        border-radius: 5px;
    }
  .contents {
    margin-top: 10px;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    background-color: #ffffff;
    width: 100%;
    height: calc(100% - 44px);
    padding: 0 5px;
    overflow-y: auto;
    .tit{
        text-align: left;
        font-size: 16px;
        margin-bottom: 15px;
        font-weight: 600;
    }
    .smTit{
        font-size: 14px;
        margin-bottom: 15px;
        padding-left: 10px;
        border-left: 5px solid #f90;
        clear: both;
    }
    .approve{
        background: #f90;
        color: #fff;
        font-size: 12px;
        border: none;
        border-radius: 5px;
        width: 100px;
        height: 40px;
        display: block;
        float: right;
    }
    .fileList{
        font-size: 13px;
        padding: 0 5px;
        padding-bottom: 20px;
        span{
                 color: #999;
            margin-right: 10px;
        }
    }
    .infoItem{
        color: #999;
        display: flex;
        justify-content: left;
        align-items: self-start;
        margin-bottom: 10px;
        font-size: 13px;
        padding: 0 5px;
        padding-bottom: 10px;
        // border-bottom: 1px solid #ddd;
        label{
         
            width: 25%;
        }
        .infoCon{
            padding: 0 1px;
            width: 75%;
            word-break: break-all;
        }
    }
  }
}
.flowList{
    margin-bottom: 50px;
}
.flowItem{
    margin-bottom: 10px;
    border: 1px solid #ddd;
    padding: 10px;
    .infoItem:last-child{
        margin-bottom: 0;
    }
}

</style>